<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/angularjs/angular.min.js"></script>
		<title>日志</title>
	</head>
	<style type="text/css">
		body,
		.container,
		.mould_daliy {
			margin: 0;
			padding: 0;
		}
		.container {
			position: relative;
			background: #e9e9e9;
			padding-bottom: 200px;
		}
		.container .bg_pgoto {
			width: 100%;
			height: 618px;
			z-index: -1;
		}
		.daily_content {
			width: 1000px;
			height: 600px;
			position: relative;
			margin-left: 18%;
			margin-top: -520px;
			background: #FFFFFF;
			border-radius: 5px;
			border: 1px solid #FFFFFF;
		}
		.daliy_header {
			width: 94%;
			height: 34px;
			margin-left: 3%;
			color: #2670AF;
			border-bottom: 2px solid #DDDDDD;
		}
		button {
			cursor: pointer;
		}
		#esc {
			float: right;
			margin-right: 3%;
			margin-top: -33px;
			width: 80px;
			height: 28px;
			color: #fff;
			cursor: pointer;
			border-radius: 3px;
			border: 1px solid #ddd;
		}
		.daily_style {
			width: 50%;
			height: 50px;
			cursor: pointer;
		}
		.write_daily {
			width: 120px;
			height: 40px;
			margin-top: 10px;
			margin-left: 5%;
			float: left;
			color: #FFFFFF;
			text-align: center;
			background: #7B8C9E;
			border-radius: 5px;
			border: 1px solid #7B8C91;
		}
		.write_daily:hover {
			background: #697A8B;
		}
		.write_daily .img {
			width: 22px;
			height: 22px;
			margin-top: 10px;
			margin-left: 10px;
			overflow: hidden;
			border-radius: 3px;
			background: #FFFFFF;
		}
		.write_daily .img img {
			margin-left: -105px;
			margin-top: -3px
		}
		.write_daily .img .mould_bg {
			margin-left: -0.5px;
			margin-top: -6px;
		}
		.write_daily p {
			margin-top: -23px;
			margin-left: 17px;
		}
		.history_daily {
			width: 95%;
			margin-top: 20px;
			margin-left: 2%;
		}
		.history_daily_dsc {
			width: 100%;
			height: 30px;
			padding-top: 8px;
			border-bottom: 1px dashed #DDDDDD;
		}
		/*模板日志*/
		
		#mould_daliy,.mould_daliy {
			width: 1000px;
			position: relative;
			margin-left: 18%;
			margin-top: -520px;
			background: #FFFFFF;
			border-radius: 8px;
			overflow: hidden;
		}
		.cmould_daily_header {
			width: 100%;
			height: 36px;
			padding-top: 10px;
			padding-left: 30px;
			font-size: 18px;
			background: #F2F2F2;
		}
		.cmould_daily_content {
			width: 96%;
			margin-left: 2%;
			margin-top: 20px;
			position: relative;
			background: #F1F4F4;
			border: 1px solid #DDDDDD;
		}
		.image1,
		.image2 {
			margin: 0px;
			padding: 0px;
			width: 100%;
			z-index: -10;
		}
		.image1 img,
		.image2 img {
			width: 100%;
			z-index: -1;
		}
		.image2 img {
			margin-top: -5px;
		}
		.image3 {
			width: 214px;
			height: 273px;
			position: relative;
			margin-top: -145px;
			margin-left: 112px;
			padding-top: 7px;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image3 img {
			width: 201px;
			height: 267px;
		}
		.write_say1 {
			width: 544px;
			position: relative;
			margin-top: -273px;
			margin-left: 370px;
		}
		.write_say1 .quotation_left1 {
			position: absolute;
			margin-top: 66px;
			margin-left: 19px;
		}
		.write_say1 .quotation_right1 {
			position: absolute;
			margin-top: 95px;
			margin-left: 500px;
		}
		#write_say_content1 {
			width: 412px;
			margin-left: 69px;
		}
		#write_say_content1 #title {
			width: 100%;
			height: 50px;
			padding-top: 5px;
			padding-left: 3px;
			font-size: 28px;
			outline: none;
			overflow: hidden;
		}
		#write_say_content1 #dsc1 {
			width: 100%;
			text-indent: 5px;
			margin-top: 15px;
			outline: none;
			color: #4c4c4c;
			padding-left: 5px;
		}
		#write_say_content1 #personal_perception1 {
			width: 98%;
			min-height: 152px;
			margin-top: 26px;
			outline: none;
			padding-left: 6px;
			padding-top: 10px;
			text-indent: 18px;
			border: 1px dashed #a8a8a8;
		}
		#personal_perception1 label,
		#personal_perception2 label,
		#personal_perception3 label {
			position: relative;
			color: #ccbcb2;
		}
		#personal_perception1 #false_write {
			width: 100%;
		}
		.write_say2 {
			width: 480px;
			position: relative;
			margin-top: 0px;
			margin-left: 48px;
		}
		.write_say2 .quotation_left2 {
			position: absolute;
			margin-top: 2px;
			margin-left: 13px;
		}
		.write_say2 .quotation_right2 {
			position: absolute;
			margin-top: 46px;
			margin-left: 435px;
		}
		#write_say_content2 {
			width: 369px;
			margin-left: 60px;
		}
		#write_say_content2 #dsc2 {
			width: 99%;
			margin-top: 10px;
			outline: none;
			color: #4c4c4c;
			padding-left: 5px;
			padding-top: 5px;
		}
		#write_say_content2 #personal_perception2 {
			width: 98%;
			margin-top: 26px;
			min-height: 152px;
			outline: none;
			padding-left: 6px;
			padding-top: 10px;
			text-indent: 18px;
			border: 1px dashed #a8a8a8;
		}
		#false_write2 {
			width: 100%;
		}
		.image4 {
			width: 300px;
			height: 180px;
			position: absolute;
			margin-top: 8px;
			margin-left: 551px;
			padding-top: 5px;
			float: left;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image4 img {
			width: 290px;
			height: 175px;
		}
		.image5 {
			width: 362px;
			height: 200px;
			position: relative;
			margin-top: 40px;
			margin-left: 108px;
			padding-top: 5px;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image6 {
			width: 362px;
			height: 200px;
			position: relative;
			margin-top: -205px;
			margin-left: 490px;
			padding-top: 5px;
			text-align: center;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image5 img,
		.image6 img {
			width: 352px;
			height: 195px;
		}
		#personal_perception3 {
			width: 735px;
			min-height: 267px;
			margin-top: 35px;
			margin-left: 108px;
			outline: none;
			padding-left: 6px;
			padding-top: 10px;
			text-indent: 18px;
			border: 1px dashed #a8a8a8;
		}
		#false_write3 {
			width: 735px;
		}
		.image7 {
			position: relative;
			width: 100%;
			height: 100px;
			margin-top: 50px;
			overflow: hidden;
		}
		.image7 .last_img {
			position: absolute;
			margin-top: 0px;
			margin-left: 0px;
		}
		.mould_daily_footer {
			width: 96%;
			margin-left: 2%;
			padding-top: 20px;
			padding-bottom: 30px;
			position: relative;
		}
		/*普通日志*/
		
		.edit_daliy,.general_daliy {
			width: 1000px;
			position: relative;
			margin-left: 18%;
			margin-top: -520px;
			background: #FFFFFF;
			border-radius: 8px;
			overflow: hidden;
			border: 1px solid #DDDDDD;
		}
		.general_daliy_content {
			width: 97%;
			position: relative;
			margin-left: 1.5%;
			border: 1px solid #DDDDDD;
		}
		.general_daliy_content .conetn_daliy_top {
			width: 100%;
			height: 50px;
			margin-top: 20px;
			border: 1px dashed #a8a8a8;
		}
		.letter_paper {
			list-style: none;
		}
		.letter_paper li {
			width: 42px;
			height: 29px;
			float: left;
			margin-top: -5px;
			border-radius: 5px;
			overflow: hidden;
			border: 1px solid #000000;
		}
		.letter_paper li img {
			cursor: pointer;
			width: 42px;
			height: 29px;
		}
		.general_daliy_content .conetn_daliy_center {
			width: 100%;
			min-height: 500px;
			background: #faeddd;
		}
		.general_daliy_content.conetn_daliy_center .bg img {
			width: 100%;
			z-index: -10;
		}
		.general_daliy_content .general_title ,.general_daliy_content .edit_general_title{
			width: 80%;
			height: 45px;
			margin-left: 10%;
			font-size: 26px;
			padding-top: 10px;
			text-align: center;
			outline: none;
			border: 1px dashed #a8a8a8;
		}
		.general_title:hover ,.edit_general_title:hover{
			border: 3px solid #ffc600;
		}
		.general_daliy_content .general_content ,.general_daliy_content .edit_general_content{
			width: 94%;
			margin-left: 3%;
			margin-top: 40px;
			padding-top: 10px;
			text-indent: 22px;
			outline: none;
			border-top: 1px dashed #a8a8a8;
		}
		.history_daily_style {
			list-style: none;
			margin-top: -9px;
		}
		.history_daily_style li {
			float: right;
			position: relative;
			cursor: pointer;
			font-size: 14px;
			color: #c0c0c0;
		}
		.history_daily_style li:hover {
			text-decoration: underline;
			color: #000000;
		}
	</style>

	<body ng-app="app">
		<div class="container" ng-controller="appController">
			<img class="bg_pgoto" src="img/daily_photo/d15.png" />
			<!--
            	描述：日志主页面
            -->
			<div class="daily_content" ng-if="blogtype=='none'">
				<div class="daliy_header">
					<h4>我的日志</h4></div>
				<button id="esc">返回</button>
				<div class="daily_style">
					<div class="write_daily" ng-click="showNormal()">
						<div class="img">
							<img src="img/daily_photo/d13.png" />
						</div>
						<a >写日志</a>
					</div>
					<div class="write_daily write_mould_daily" ng-click="showModel()">
						<div class="img">
							<img class="mould_bg" src="img/daily_photo/d13.png" />
						</div>
						<a >模板日志</a>
					</div>
				</div>
				<div class="history_daily">
					<ul>
						<li ng-repeat="blog in blogs">
							<div>{{blog.title}}</div>
							<div>{{blog.time|date:"yyyy-MM-dd"}}</div>
							<div><a href="javascript:void(0);" ng-click="delblog(blog)">删除</a></div>
							<div><a href="javascript:void(0);" ng-click="editblog(blog)">修改</a></div>
						</li>
					</ul>
				</div>
			</div>
			<!--
            	描述：普通日志
            -->
			<div class="general_daliy" ng-if="blogtype=='normal'">
				<div class="cmould_daily_header general_daily_header">
					<label>写日志</label>
				</div>
				<div class="general_daliy_content">
					<div class="conetn_daliy_top">
						<ul class="letter_paper">
							<li style="margin-left: -30px;font-size:14px;padding-top: 5px;border:none;">信纸：</li>
							<li><img src="img/daily_photo/g12.gif" /></li>

						</ul>
					</div>
					<div class="conetn_daliy_center">
						<div class="bg"><img style="width:100%;" src="img/daily_photo/g2.jpg" /></div>
						<textarea class="general_title" placeholder="请在这里输入标题" ng-model="inputtitle">

						</textarea>
						<div class="general_content" contenteditable="true"></div>
					</div>
					<div class="conetn_daliy_bottom"></div>
				</div>
				<div class="mould_daily_footer">
					<button ng-click="publish(inputtitle)" class="report" style="background:#5caae6;color:#FFFFFF;width:85px;height:25px;border:1px solid #5caae6;border-radius:2px;">发表</button>
					<button ng-click="back()" class="esc" style="color:#878773;height:25px;width:55px;">取消</button>
					<button style="float:right;color:#878773;width:85px;height:25px;">保存草稿</button>
				</div>
			</div>

			<!--
            	描述：模板日志
            -->
			<div class="mould_daliy" ng-if="blogtype=='model'">
				<div class="cmould_daily_header">
					<label>写日志</label>
				</div>
				<div class="cmould_daily_content">
					<div class="image1">
						<img src="img/daily_photo/d1.jpg" />
					</div>
					<div class="image2">
						<img src="img/daily_photo/d2.jpg" />
					</div>
					<div class="image3">
						<img src="img/daily_photo/d5.jpg" />
					</div>
					<div class="write_say1">
						<img class="quotation_left1" src="img/daily_photo/d3.png" />
						<img class="quotation_right1" src="img/daily_photo/d4.png" />
						<div id="write_say_content1">
							<div id="title" contenteditable="true">致我们终将逝去的青春</div>
							<div id="dsc1" contenteditable="true">“人生本来就有很多事是徒劳无功的。”就像青春，虽然徒劳，却在人的心里住得最久，挥之不去，怀念那段青涩年华，怀念它的...</div>
							<div id="personal_perception1" contenteditable="true">
								<label>那些曾经美好的回忆，他写的情书，相视而笑的样子，你还记着么？一起来重拾那曾经的美好...</label>
								<div id="false_write1"></div>

							</div>
						</div>

					</div>
					<div class="image4">
						<img src="img/daily_photo/d6.jpg" />
					</div>
					<div class="write_say2">
						<img class="quotation_left2" src="img/daily_photo/d3.png" />
						<img class="quotation_right2" src="img/daily_photo/d4.png" />
						<div id="write_say_content2">
							<div id="dsc2" contenteditable="true">长长的喜欢，没有理由的自信，青春里小小的秘密，爱情明明触手可及，但又在莫名中失去，如果时光倒流，你最想...</div>
							<div id="personal_perception2" contenteditable="true">
								<label>牵着他的手，走在城市的街头，就这样满足小小的我</label>
								<div id="false_write2"></div>
							</div>
						</div>
					</div>

					<div class="image5">
						<img src="img/daily_photo/d7.jpg" />
					</div>
					<div class="image6">
						<img src="img/daily_photo/d8.jpg" />
					</div>
					<div id="personal_perception3" contenteditable="true">
						<label>一起翘课，一起吃饭，一起打球，一起看电影，美好的回忆我只想在这里写下纪念我怀念的——那些年</label>
						<div id="false_write3"></div>
					</div>
					<div class="image7">
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img class="last_img" src="img/daily_photo/d9.png" />
					</div>

				</div>
				<div class="mould_daily_footer">
					<button class="mould_report" style="background:#5caae6;color:#FFFFFF;width:85px;height:25px;border:1px solid #5caae6;border-radius:2px;">发表</button>
					<button ng-click="back()" class="esc" style="color:#878773;height:25px;width:55px;">取消</button>
					<button style="float:right;color:#878773;width:85px;height:25px;">保存草稿</button>
				</div>
			</div>
			
			<!--
            	作者：812474076@qq.com
            	时间：2017-01-02
            	描述：
            -->
			<div class="edit_daliy" ng-if="blogtype=='edit'">
				<div class="cmould_daily_header general_daily_header">
					<label>写日志</label>
				</div>
				<div class="general_daliy_content">
					<div class="conetn_daliy_center">
						<div class="bg"><img style="width:100%;" src="img/daily_photo/g2.jpg" /></div>
						<textarea ng-model="eblog.title" class="edit_general_title" contenteditable="true">

						</textarea>
						<div class="edit_general_content" contenteditable="true"></div>
					</div>
					<div class="conetn_daliy_bottom"></div>
				</div>
				<div class="mould_daily_footer">
					<button class="edit_report" ng-click="back()" style="background:#5caae6;color:#FFFFFF;width:85px;height:25px;border:1px solid #5caae6;border-radius:2px;">保存</button>
					<button class="esc" ng-click="back()" style="color:#878773;height:25px;width:55px;">取消</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		(function(){
			'user strict';
			var app=angular.module("app",[]);
			app.controller("appController",["$scope",function($scope){
				$scope.blogtype="none";
				$scope.blogs=[{title:'标题1',time:new Date()},{title:'标题1',time:new Date()},{title:'标题1',time:new Date()},{title:'标题1',time:new Date()},{title:'标题1',time:new Date()}];
				$scope.publish=function(title){
					var b={
					    title:title,
						time:new Date()
					}
                    $scope.blogs.push(b);
                    $scope.back();

				}
				$scope.delblog=function(blog){
				    for(var i=0;i<$scope.blogs.length;i++){
				        if($scope.blogs[i].title==blog.title){
                            $scope.blogs.splice(i,1);
                            break;
						}
					}
				}
				$scope.editblog=function(blog){
					$scope.eblog=blog;
                    $scope.showEdit();
				}
                $scope.back=function(){
                    $scope.blogtype='none';
                }
				$scope.showModel=function(){
                    $scope.blogtype='model';
				}
                $scope.showNormal=function(){
                    $scope.blogtype='normal';
                }
                $scope.showEdit=function(){
                    $scope.blogtype='edit';
                }
			}]);
		})()
	</script> 

</html>